var specifys = [
    {
      'name': '颜色',
      'value': [
        {id:1, des: '红色'},
        {id:2, des: '蓝色'},
        {id:3, des: '黑色'}
      ]
    },
    {
      'name': '尺寸',
      'value': [
        {id:4, des: '190*128'},
        {id:5, des: '150*165'},
        {id:6, des: '188*124'}
      ]
    },
    {
      'name': '材质',
      'value': [
        {id:7, des: '胡桃'},
        {id:8, des: '核桃'}
      ]
    }
  ]
  let selectedSku = '-1-4-7-'
  var avaliableSpecify = [
    {
      'id': 1,
      'sku': '-1-4-7-'
    },
    {
      'id': 2,
      'sku': '-2-4-7-'
    },
    {
      'id': 3,
      'sku': '-2-4-8-'
    },
    {
      'id': 1,
      'sku': '-1-5-7-'
    }
  ]
  function addClass (el, cls) {
    /* istanbul ignore if */
    if (!cls || !(cls = cls.trim())) {
      return
    }
  
    /* istanbul ignore else */
    if (el.classList) {
      if (cls.indexOf(' ') > -1) {
        cls.split(/\s+/).forEach(function (c) {
          return el.classList.add(c);
        });
      } else {
        el.classList.add(cls);
      }
    } else {
      var cur = " " + (el.getAttribute('class') || '') + " ";
      if (cur.indexOf(' ' + cls + ' ') < 0) {
        el.setAttribute('class', (cur + cls).trim());
      }
    }
  }
  function hasClass (el, cls) {
    if (!cls || !(cls = cls.trim())) {
      return
    }
    if (el.classList) {
      if (cls.indexOf(' ') > -1) {
        cls.split(/\s+/).forEach((c) => {
          if (el.className.indexOf(c) > -1) {
            return true
          }
        });
      } else {
        if (el.className.indexOf(cls) > -1) {
          return true
        }
      }
      if (!el.classList.length) {
        el.removeAttribute('class');
      }
    }
    return false
  }
  function toggleClass (el, cls) {
    if (hasClass(el, cls)) {
      removeClass(el, cls)
    }
    else {
      addClass(el, cls)
    }
  }
  /**
   * Remove class with compatibility for SVG since classList is not supported on
   * SVG elements in IE
   */
  function removeClass (el, cls) {
    /* istanbul ignore if */
    if (!cls || !(cls = cls.trim())) {
      return
    }
  
    /* istanbul ignore else */
    if (el.classList) {
      if (cls.indexOf(' ') > -1) {
        cls.split(/\s+/).forEach(function (c) {
          return el.classList.remove(c);
        });
      } else {
        el.classList.remove(cls);
      }
      if (!el.classList.length) {
        el.removeAttribute('class');
      }
    } else {
      var cur = " " + (el.getAttribute('class') || '') + " ";
      var tar = ' ' + cls + ' ';
      while (cur.indexOf(tar) >= 0) {
        cur = cur.replace(tar, ' ');
      }
      cur = cur.trim();
      if (cur) {
        el.setAttribute('class', cur);
      } else {
        el.removeAttribute('class');
      }
    }
  }
  function getSiblings(node) {
    let r = [];
    let n = node.parentNode.firstChild
    let skipMe = node
    function getChildren () {
      for ( ; n; n = n.nextSibling )
        if ( n.nodeType == 1 && n != skipMe) {
          r.push( n )
        }
      return r
    }
    return getChildren
  }
  function formSpecify () {
    let count = 0;
    var div = document.createElement('div')
    specifys.map((v, key) => {
      let vlist = v.value
      let ulnode = document.createElement('ul')
      ulnode.innerHTML = '<label>'+ v.name +'：<\/label>'
      ulnode.className = 'specifyUl'
      vlist.map((a, b) => {
        let r = selectedSku.indexOf('-'+a.id+'-') > -1; // 判断当前属性是否被选中
        let s = r ? {status: true} : {status: false}
        let ab = { ...a, ...s };
        vlist[b] = ab
        var li = document.createElement('li')
        li.setAttribute('data-id', a.id)
        li.setAttribute('level', count)
        li.innerHTML = a.des
        if (r) li.className = 'selected'
        ulnode.appendChild(li)
      })
      count++
      div.appendChild(ulnode)
    })
    return div
  }
  /* 选中当前点击的ul的li*/
  function selectCurrentLi(target, pnode) {
    let lilist = pnode.querySelectorAll('li')
    for (let a of lilist){
      removeClass(a, 'selected')
    }
    addClass(target, 'selected')
  }
  /*判断当前选中的li配合的可选情况*/
  function adjustAvaliable(target, pnode, dataId, previouseSeletedId) {
    //选中包含当前选择的li的元素集合
    let avaliCopy = []
    // let otherNodes = getSiblings(pnode)
    let result = pnode.parentNode.childNodes
    let test = []
    for(let v of result) {
      let lilis = v.childNodes
      for(let li of lilis) {
        if (li.nodeName == 'LI') test.push(li)
      }
    }
    let arr = []
    avaliableSpecify.map((v, k) => {
      let sku = v.sku
      let selectedId = '-' + dataId + '-'
      if (sku.indexOf(selectedId) > -1) {
        // let temp = sku.replace(selectedId, '-')
        let tempArr = sku.substring(1, sku.length-1).split('-')
        arr.map((c, d) => {
          tempArr.map((a, b) => {
             if (a == c) {
               tempArr.splice(b,1)
             }
          })
        })
        arr = arr.concat(tempArr)
      }
    })
    let arrString = '-' + arr.join('-') + '-'
    let initialIds = []
    test.map((li, k) => {
      let lidid = li.getAttribute('data-id')
      let countIndex = arrString.indexOf('-' + lidid + '-')
      // console.log(arrString, lidid, countIndex)
      removeClass(li, 'selected')
      if (countIndex < 0 ) {
        addClass(li, 'unavaliabled')
      }
      else {
        // 给定一个默认选中的值
        removeClass(li, 'unavaliabled')
        initialSelect(pnode)
      }
    })
    // console.log(initialIds)
  }
  
  function initialSelect (pnode) {
    let otherNodes = getSiblings(pnode)
    let ulsiblings = otherNodes()
    for (let v of ulsiblings) {
      let lilis = v.childNodes
      let avaiableLen = lilis.length - v.querySelectorAll('.unavaliabled').length
      if (avaiableLen > 0) {
        for(let li of lilis) {
          // console.log(li.className, li.className.indexOf('unavaliabled'))
          if (li.nodeName == 'LI' && li.className.indexOf('unavaliabled') < 0) {
            addClass(li, 'selected')
            break;
          }
         
        }
      }
    }
  }
  
  function selectSpecify() {
    let e = window.event
    let target = e.target
    if (target.nodeName === 'LI') {
      let dataId = target.getAttribute('data-id')
      let pnode = target.parentNode
  
      adjustAvaliable(target, pnode, dataId)
      selectCurrentLi(target, pnode)
    }
  }
  !(function(){
    let specifyHtml = formSpecify().innerHTML
    let specifyObj = document.getElementById('specify')
    specifyObj.innerHTML = specifyHtml
    specifyObj.addEventListener('click', selectSpecify, false)
  })()
  
  
  